<template>
	<view class="container">
		<view class="video-list">
			<block v-for="item,index in videoList" :key="index">
				<view class="box" style="position: relative;" v-if="item.storageType==1">
					<image src="../../static/icon/play.png" @click="playVideo(item.videoUrl)"
						style="height: 60rpx;width: 60rpx;position: absolute;top:180rpx;left:130rpx;"></image>
					<image v-if="item.videoUrl" id="myVideo" :autoplay="false" style="width: 320rpx;height: 400rpx"
						:src="item.videoUrl+'?x-oss-process=video/snapshot,t_0,w_320,h_400,f_jpg'" class="video"
						@click="playVideo(item.videoUrl)"></image>

					<view class="operate">
						<view class="btn" style="color: #ff0000;" :data-id="item.id" @click="del">删除</view>
						<view v-if="!isHide" class="btn" style="color:#00008B;" @click="choose(item)">
							选择
						</view>
					</view>
				</view>

				<view class="box" style="position: relative;" v-else>
					<view v-if="item.isTranscode==1">
						<image src="../../static/icon/play.png" @click="playVideo(item.flvUrl)"
							style="height: 60rpx;width: 60rpx;position: absolute;top:180rpx;left:130rpx;"></image>

						<image style="width: 320rpx;height: 400rpx" class="video"
							:src="item.themeUrl">
						</image>
					</view>
					<view v-else
						style="width: 320rpx;height: 400rpx;background: rgba(0, 0, 0, 0.6);display: flex;justify-content: center;align-items: center;">
						<text style="color: #fff;">正在转码中...</text>
					</view>

					<view class="operate">
						<view class="btn" style="color: #ff0000;" :data-id="item.id" @click="del">删除</view>
						<view v-if="!isHide" class="btn" style="color:#00008B;" @click="choose(item)">
							选择
						</view>
					</view>
				</view>
			</block>

		</view>

		<view style="height:110rpx;width:100%;">

		</view>
		<view class="footer">
			<view class="upload-btn" @click="uploadVideo">
				上传视频
			</view>
		</view>
	</view>
</template>

<script>
	import Http from "@/utils/http"
	const app = getApp()
	const http = new Http()
	export default {
		data() {
			return {
				secondType: 1,
				videoList: [],
				minDuration: 1,
				maxDuration: 10,
				isHide: false,
				currentPage: 1,
				videoContext: {}
			}
		},
		onLoad(options) {
			var pages = getCurrentPages()
			var currentPage = pages[pages.length - 3]
			if (currentPage.route == "pages/AiVideo/AiVideo") {
				this.isHide = true
			}

			if (options.type == undefined || options.type == 1) {
				var secondType = 1
				var title = "3秒素材库"
				this.minDuration = 3
				this.maxDuration = 3
			}
			if (options.type == 2) {
				var secondType = 2
				this.minDuration = 7
				this.maxDuration = 7
				var title = "7秒素材库"
			}
			if (options.type == 3) {
				var secondType = 3
				this.minDuration = 3
				this.maxDuration = 20
				var title = "7秒以上素材库"
			}

			uni.setNavigationBarTitle({
				title: title
			})
			this.secondType = secondType
			this.refresh(secondType, this.currentPage)
		},
		// onReachBottom(e) {
		// 	var currentPage = this.currentPage+1
		// 	this.refresh(this.secondType,currentPage)
		//  console.log("~~~~~~~~~~~",e);    	
		// },
		mounted() {
			this.videoContext = uni.createVideoContext(`myVideo`)
			this.videoContext.stop()

		},
		methods: {
			playVideo(videoPath) {
				uni.navigateTo({
					url: '/subpkg/bopage/classbo?videoPath=' + videoPath
				});
			},
			refresh(type, currentPage) {
				http.get(`v1/videoLibrary/list?secondType=${type}&currentPage=${currentPage}`).then(res => {
					this.videoList = res.data.data
					console.log("res====>", res);
					if (res.data.data.length > 0) {
						this.currentPage = currentPage
					} else {
						return uni.showToast({
							title: "暂无更多素材",
							icon: "none"
						})
					}

					// res.data.data.forEach(item=>{
					// 	this.videoList.push(item)
					// })

				})
			},
			//上传视频

			uploadVideo() {
				let secondType = this.secondType
				var that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['video'],
					sizeType: ['original'],
					sourceType: ['album', 'camera'],
					minDuration: that.minDuration,
					maxDuration: that.maxDuration, // 拍摄视频最长拍摄时间，单位秒
					camera: 'back',
					success(resOne) {
						console.log("+++++++", resOne);
						var localPath = resOne.tempFiles[0].tempFilePath
						var height = resOne.tempFiles[0].height
						var width = resOne.tempFiles[0].width
						uni.openVideoEditor({
							filePath: localPath,
							minDuration: that.minDuration,
							maxDuration: that.maxDuration, // 拍摄视频最长拍摄时间，单位秒
							success: (editRes) => {
								console.log("editRes====>", editRes);

								http.uploadBaiduyun(editRes.tempFilePath).then(res => {
									let a = JSON.parse(res.data);
									// let obj = {
									// 	mediaURL: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' +
									// 		a.result.name
									// }
									//fs_id: 55607768395613
									// md5: "cdb47782fq757df9e9b50038f53fb114"
									// path: "/mojianwenjia/mojian/2024/4/11/171280147735309a41635d5474d9eb86c8ce8d314eea3.mp4"
									// requesta_id: null
									// size: 763376
									var dataParam = {
										secondType: secondType,
										width: width,
										height: height,
										fsid: a.result.fs_id,
										videoUrl: a.result.path,
										isTranscode: 2,
										storageType: 2
									};
									http.post("v1/videoLibrary/add", dataParam).then(
										result => {
											that.refresh(secondType, that.currentPage)
										})
								})
							},
							fail: (editorFail) => {
								console.log("editorFail=====>", editorFail);
							}
						});




						console.log("====>", resOne);
						// return false;
						// http.upload(resOne.tempFiles[0].tempFilePath).then(res => {
						// 	let a = JSON.parse(res.data);
						// 	let obj = {
						// 		mediaURL: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' +
						// 			a.result.name
						// 	}
						// 	http.post("v1/videoLibrary/add", {
						// 		secondType: secondType,
						// 		width:resOne.width,
						// 		height:resOne.height,
						// 		videoUrl: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' +a.result.name
						// 	}).then(result => {
						// 		that.refresh(secondType,that.currentPage)
						// 	})
						// })




					}
				})


				// wx.chooseVideo({
				// 	sourceType: ['album', 'camera'], // 视频选择的来源，包括相册('album')和摄像头('camera')
				// 	compressed: false,
				// 	minDuration: this.minDuration,
				// 	maxDuration: this.maxDuration, // 拍摄视频最长拍摄时间，单位秒
				// 	camera: 'back', // 默认拉起的是前置或后置摄像头
				// 	success: (resOne) => {
				// 		console.log("====>", resOne);

				// 					http.upload(resOne.tempFilePath).then(res => {
				// 						let a = JSON.parse(res.data);
				// 						let obj = {
				// 							mediaURL: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' +
				// 								a.result.name
				// 						}
				// 						http.post("v1/videoLibrary/add", {
				// 							secondType: secondType,
				// 							width:resOne.width,
				// 							height:resOne.height,
				// 							videoUrl: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' +a.result.name
				// 						}).then(result => {
				// 							this.refresh(secondType,this.currentPage)
				// 						})
				// 					})



				// 		//=============================
				// 		// let obj = {
				// 		// 	filePath: resOne.tempFilePath,
				// 		// 	minDuration: this.minDuration,
				// 		// 	maxDuration: this.maxDuration,
				// 		// 	success: (res) => {
				// 		// 		http.upload(res.tempFilePath).then(res => {
				// 		// 			let a = JSON.parse(res.data);
				// 		// 			let obj = {
				// 		// 				mediaURL: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' +
				// 		// 					a.result.name
				// 		// 			}
				// 		// 			http.post("v1/videoLibrary/add", {
				// 		// 				secondType: secondType,
				// 		// 				width:resOne.width,
				// 		// 				height:resOne.height,
				// 		// 				videoUrl: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' +a.result.name
				// 		// 			}).then(result => {
				// 		// 				this.refresh(secondType,this.currentPage)
				// 		// 			})
				// 		// 		})
				// 		// 	},
				// 		// 	fail: (res) => {
				// 		// 		console.log(res);
				// 		// 	}
				// 		// }
				// 		// uni.openVideoEditor(obj);
				// 	}
				// });
			},
			async choose(item) {
				if (item.storageType == 2 && item.isTranscode == 2) {
					return uni.showToast({
						title: "正在转码的不能选择",
						icon: "none"
					})
				}
				
				if(item.storageType==2){
				uni.showLoading({
					title:"数据转换中"
				})
					console.log(item);
					let res = await http.post("v1/videoLibrary/replaceBaiduyun",{
						id:item.id,
						dlink:item.dlink
					})
					uni.hideLoading()
					console.log("====>",res);
					item.videoUrl = "https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/"+res.data.data.name
				}
				var pages = getCurrentPages()
				var prePage = pages[pages.length - 3]
                   
				if (prePage.$vm._data.selectedValue == "r1") {
					prePage.$vm._data.form.videoList.push({
						id: null,
						height: item.height,
						width: item.width,
						mediaURL: item.videoUrl
					})
					uni.navigateBack({
						delta: 2
					})
				} else {
					var prePage = pages[pages.length - 3]

					let obj = {
						id: prePage.$vm._data.jiaoben.index,
						mediaURL: item.videoUrl,
						height: item.height,
						width: item.width,
					}
					prePage.$vm._data.form.videoList.push(obj);
					console.log("多镜成片", prePage.$vm);
					uni.navigateBack({
						delta: 2
					})
				}

				// prePage.$vm._data.form.audioList = this.chooseMusicList
				// 
			},
			del(e) {
				let id = e.currentTarget.dataset.id
				uni.showModal({
					cancelText: "取消",
					confirmText: "确定",
					title: "是否删除该视频素材",
					success: (confirm) => {
						if (confirm.confirm) {
							http.post("v1/videoLibrary/delete", {
								id: id
							}).then(res => {
								if (res.data.code != 200) {
									return uni.showToast({
										title: res.data.msg
									})
								}
								this.refresh(this.secondType, this.currentPage)
								uni.showToast({
									title: "删除成功"
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f1f1f1;
	}

	.video-list {
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx 0;
		margin: 0 20rpx;
		justify-content: space-between;

		.box {
			width: 320rpx;
			height: 470rpx;
			margin-bottom: 30rpx;

			.operate {
				height: 70rpx;
				display: flex;
				font-size: 32rpx;
				background: #fff;
				justify-content: space-between;
				padding: 0 10rpx;

				.btn {
					width: 110rpx;
					height: 70rpx;
					line-height: 70rpx;
				}
			}
		}

	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-top: 1rpx solid #eee;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.upload-btn {
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background: #00008B;
			color: #fff;
			text-align: center;
		}
	}
</style>